<template>
  <div class="control-panel">
    <!-- 页面中准备绘图的画布(盒子)；设置ref，后期在JS中获取到画布 -->
    <div class="imgBox1" ref="imgBox1"></div>
    <div class="imgBox2" ref="imgBox2" v-permission="'XFP009'"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "control-panel",
  methods: {
    // 折线图
    drawImgOne() {
      let myChart = echarts.init(this.$refs.imgBox1);
      let options = {
        title: {
          text: "折线图测试",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["Email", "Phone"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Phone",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };
      myChart.setOption(options);
    },
    // 饼状图
    drawImgTwo() {
      let myChart = echarts.init(this.$refs.imgBox2);
      let options = {
        legend: {
          top: "bottom",
        },
        series: [
          {
            name: "饼状图测试",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "星期一" },
              { value: 38, name: "星期二" },
              { value: 32, name: "星期三" },
              { value: 30, name: "星期四" },
              { value: 28, name: "星期五" },
              { value: 26, name: "星期六" },
              { value: 22, name: "星期日" },
            ],
          },
        ],
      };
      myChart.setOption(options);
    },
  },
  mounted() {
    // 必须保证可以获取到画布后再去绘制
    this.drawImgOne();
    this.drawImgTwo();
  },
};
</script>

<style lang="less" scoped>
/* 画布必须设置宽高 */
.control-panel {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  div {
    box-sizing: border-box;
    width: 46%;
    height: 400px;
  }
}
</style>